<template>
  <el-col :span="14">
    <h1>GEGUHANGQING</h1>
    <!-- <el-button slot="append" icon="el-icon-search">{{$route.params.stockID}}</el-button>     -->
    <!-- <el-button slot="append" icon="el-icon-search">{{stockID}}</el-button>     -->
    <el-input placeholder="请输入内容" v-model="stockID" clearable>
      <el-button slot="append" icon="el-icon-search" @click="goIndividual"></el-button>    
    </el-input>
    <span>{{stockID}}</span>
    <span>{{$route.params.stockID}}</span>
    <span>{{'store:'+$store.state.stockID}}</span>
  </el-col>
</template>

<script>
export default {
  // props:['stockID'],
  data() {
    return {
    }
  },
  // 如果方法里面props中值不是固定的就需要用watch监听，一旦值发生变化就会触发，这时才能取到
  /* watch:{
    getStockCode:function(newVal,oldVal){
      // this.sCode=newVal
      this.stockID
    }
  }, */
  methods:{
    goIndividual(){
      // 编程式导航
      const test=this.stockID;
      console.log(test);
      this.$router.push(`/stock/${test}`)
      // this.$store.dispatch('selectStock')
      // ERROR!!!Legacy octal literals are not allowed in strict mode 
      // this.$router.push({name:'individual',params:{stockCode:0000002}})

    }
  },
  watch:{
    // 数据发生变化时会自动调用方法，改变stockID的值，一旦页面加载完成created钩子函数就不会再触发，除非再次刷新页面
    // 这里要实现改变地址栏的股票代码，按回车键改变vuex中的全局变量stockID，所以要用钩子函数
    stockID:function(newVal,oldVal){
      this.$store.commit('setStockCode',newVal)

    }
  },
  created:function () {
    // 一开始就拿到stockID，因为watch侦听器只有在数据变化时才会调用，但是一开始就需要stockID
    this.$store.commit('setStockCode',this.stockID)
  }
}
</script>

<style>
</style>
